const baseConfig = require('./webpack.base')
const webpack = require('webpack')
const path = require('path')
const HtmlwebpackPlugin = require('html-webpack-plugin')
const WriteFileWebpackPlugin = require('write-file-webpack-plugin')

const HTMLDirs = ['index', 'detail', 'play']
// 通过 html-webpack-plugin 生成的 HTML 集合
let HTMLPlugins = []
// 入口文件集合
let Entries = {}
// 生成多页面的集合
HTMLDirs.forEach((page) => {
  const htmlPlugin = new HtmlwebpackPlugin({
    filename: `${page}.html`,
    template: `${path.resolve('src')}/html/${page}.html`,
    chunks: ['base', page],
    chunksSortMode: 'manual',
  })
  HTMLPlugins.push(htmlPlugin)
  Entries[page] = `${path.resolve('src')}/${page}.js`
})

Entries['base'] = `${path.resolve('src')}/main.js`

const config = {
  mode: 'development',
  ...baseConfig,
  entry: Entries,
  // devServer: {
  //   contentBase: path.resolve(__dirname, '..', 'public'),
  //   compress: true,
  //   port: 8080,
  //   open: true,
  //   hot: true,
  //   // hotOnly: true,
  // },
  plugins: [new WriteFileWebpackPlugin(), new webpack.HotModuleReplacementPlugin(), ...HTMLPlugins, ...baseConfig.plugins],
  devtool: 'cheap-module-inline-source-map',
}

module.exports = config
